import './style.scss'
import { useAppDispatch, useAppSelector } from '@/store'
import { toolClassMap, toolMap } from '@/reducers/toolSlice'


export default () => {
  const dispatch = useAppDispatch();
  const toolsState = useAppSelector((state) => state.tools)

  return <>
    <div className="page-tools">
      {
        toolsState.list.map((item) => {
          const ToolClass = toolClassMap[item.name];
          return <div 
            className={`tool-button-wrapper ${toolsState.active?.name == item.name ? 'active' : ''}`}
            key={item.name} 
            onClick={() => {
            if(toolsState.active) toolMap[toolsState.active?.name].onInActive(dispatch)
              toolMap[item.name].onActive(dispatch)
            }}
          >
            { ToolClass.ToolItem && <ToolClass.ToolItem {...item}></ToolClass.ToolItem> }
          </div>
        })
      }
    </div>
  </>
}